<template>
	<ElFormItem :label="props.label">
		<ElSelect v-model="input_model" @change="onchange" :placeholder="'请选择'+props.label">
			<ElOption v-for="item in options"
				  :key="item.value"
				  :label="item.label"
				  :value="item.value">
			</ElOption>
		</ElSelect>
	</ElFormItem>
</template>


<script lang="ts" setup>
import { ElOption, ElSelect } from 'element-plus';

	const props=defineProps({
		pidentifier:String,
		identifier:String,
		label:String,
		required:Boolean,
		value:String,
		options:Object,
	})
	
	const options=ref<any[]>([]);
	const input_model=ref<String>();
	watch(props,() => {
			options.value=[];
			options.value=props.options?.items||[]
			input_model.value=props.value
		},
	    { immediate: true, deep: true },
	)
	
	const error=ref(false);
	const error_message=ref();
	const emits = defineEmits(['onchange'])
	
	const onchange=()=>{
		validate();
		emits('onchange',{
			pidentifier:props.pidentifier,
			identifier:props.identifier,
			value:enumValue(input_model.value)
		})
	}
	
	function enumValue(value:any){
		let v=parseInt(value);
		if(isNaN(v)){
			return value
		}else{
			return v;
		}
	}
	
	const validate=()=>{
		if(props.required && input_model.value==''){
			error.value=true
			error_message.value=props.label+'必填.'
			return;
		}
		error.value=false
		error_message.value=''
	}
	
	onMounted(() => {
	});
</script>

<style scoped>
</style>